Registration Form in HTML

HTML Forms can be seen everywhere today in all kinds of sites. These HTML forms are used to collect data or information or feedback etc., from the visitors of your site. There are Log In Forms, Registrations Forms, Contact Us Forms, among others.

HTML Forms are used to obtain kinds of user details and inputs, such as name, age, and email address. The forms used in the websites are formed with the help of different special elements known as ‘controls’ in HTML, for example, text areas, radio buttons, checkboxes, submit buttons, etc. While using such forms, users or visitors enter the information or data by modifying these controls, for example, by entering texts or performing selection on specific items, etc. and then by submitting the form. When the form is duly filled, the submitted form adds data, or sends it or redirects it to another page or could also save the details in a database.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

HTML Forms are easy to create. As all other HTML elements, to create a form we need an opening form tag () and a closing form tag (), which in turn will use other attributes like elements, elements, elements among others to create a fully functional form. of course, we have to use CSS for look and feel.

Following is a basic syntax for an HTML Form.

Syntax:

Let’s see an example code excerpt for a simple HTML form. The form shown below is a simple Log In Form and has minimal control elements.

Code:

As shown above, this Log In Form has two text boxes and a submit button labeled as Log In. It’s a simple HTML form that we have created, and the data entered is decided to be printed after the user submits it. The ‘react’ part of an HTML form is handled by our javascript function, which is called with the help of an attribute called ‘onclick’ added to the submit button.

Output:

Above is the output we receive when the code is executed. After entering the Username and Password, we submit the form and the following welcome message is displayed.

Output:

The above-discussed form is a simple login form which is accepting only two values, username and password and is submitted. Here we are simply printing the values, but normally in the processing part, one can compare ‘log in’ details with the saved values in a database and show a ‘successful login’ message.

A registration form, however, is something that accepts a variety of data or information, like name, user name, password, date of birth, email address, among others, and this information is then subjected to processing that might include a display of the data on the next page or saving of data into a database and performing a successful registration.

Let’s see the creation of the Registration Form, step by step.

Step 1: Create and add HTML form elements and their associated elements. Here we will create nested form-related or associated elements inside opening and closing Form tags. You can also ‘add action’ attribute to your tag.

Following is the HTML code excerpt for our form.

Code:

Please fill in the details to create an account with us.

By creating an account you agree to our Terms & Privacy.

Already have an account? Sign in.

Output:

Step 2: Add CSS for look and feel. This step is optional since without adding CSS as well, your form will register equally successfully. (Optional)

So for our registration form, I added a bit of the magic of CSS. When the above HTML code is executed, we see the following form displayed in our browser.

The above-discussed registration form is a simple registration form where there are no rules, that is, validations. Some might say, registration forms are incomplete without validations.

Now validations are a ‘set of rules or instructions that a programmer sets for the user or the visitor of your web site. For example, a username should be of 5 to 8 characters, or Password can not have a special character and so on.

Following is an example of a registration form with some validations. A keyword, ‘required’ used with an element, specifies that that element is necessary to be filled. We will add this keyword to our text field, ‘Email’ and see the result below;

Code:

Output:

Let’s see another example with some more types of form associated elements and attributes.

The above-given example is a type of responsive registration form with several elements like drop-down menus, text boxes, submit button. Note that with a little intelligent use of CSS and javascript validations, a simple registration form looks much better. Check when the browser window shrinks; the form readjusts itself according to the window size. Also, the validations added to the form let the user know if he left a blank text box. Check the HTML code excerpt below.

Check the CSS used in code:

The screenshot on your right is the result of the above HTML code with the help of CSS. The registration form is different from other forms since they collect data from the user or visitor and use validations to check if the data is correct.

This is a guide to the Registration Form in HTML. Here we discuss the introduction and how to create a registration html form along with different examples and its code implementation. You may also have a look at the following articles to learn more –

Related Courses